<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站幸运抽奖活动</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #6366F1;
            --secondary: #EC4899;
            --accent: #F59E0B;
            --success: #10B981;
            --danger: #EF4444;
            --dark: #1E293B;
            --light: #F8FAFC;
            --gray: #64748B;
            --light-gray: #F1F5F9;
            --border: #E2E8F0;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            --radius: 12px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #FAF5FF;
            color: var(--dark);
            padding-top: 2rem;
            padding-bottom: 4rem;
        }
        
        .container {
            max-width: 1100px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .page-subtitle {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 通用样式 */
        .draw-section {
            margin-bottom: 4rem;
            padding: 2rem;
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            position: relative;
        }
        
        .section-header {
            margin-bottom: 1.75rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: var(--primary);
        }
        
        .section-description {
            color: var(--gray);
            font-size: 0.95rem;
            margin-top: 0.5rem;
        }
        
        /* 幸运大转盘 */
        .wheel-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem 0;
        }
        
        .wheel-wrapper {
            position: relative;
            width: 320px;
            height: 320px;
            margin-bottom: 2rem;
        }
        
        @media (min-width: 768px) {
            .wheel-wrapper {
                width: 420px;
                height: 420px;
            }
        }
        
        .wheel {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            border: 8px solid white;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
            transition: transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.99);
        }
        
        .wheel-section {
            position: absolute;
            width: 50%;
            height: 50%;
            transform-origin: bottom right;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .wheel-text {
            position: absolute;
            width: 60px;
            text-align: center;
            transform-origin: center;
            font-weight: 600;
            font-size: 0.85rem;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }
        
        .wheel-pointer {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 40px;
            z-index: 10;
            pointer-events: none;
        }
        
        .draw-btn {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            padding: 0.85rem 2.5rem;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }
        
        .draw-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
        }
        
        .draw-btn:disabled {
            background: var(--gray);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .draw-info {
            margin-top: 1rem;
            color: var(--gray);
            font-size: 0.9rem;
            text-align: center;
        }
        
        .draw-count {
            display: inline-block;
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.2rem 0.75rem;
            border-radius: 20px;
            font-weight: 500;
        }
        
        /* 九宫格抽奖 */
        .grid-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 1rem;
        }
        
        .prize-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        
        .prize-item {
            aspect-ratio: 1/1;
            border-radius: var(--radius);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: var(--light-gray);
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .prize-item.active {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            transform: scale(1.05);
            z-index: 5;
        }
        
        .prize-item.winning {
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
            }
        }
        
        .prize-icon {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: var(--primary);
        }
        
        .prize-item.active .prize-icon,
        .prize-item.active .prize-name {
            color: white;
        }
        
        .prize-name {
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--dark);
            text-align: center;
        }
        
        .draw-btn.grid-btn {
            margin: 1.5rem auto 0;
            display: block;
        }
        
        /* 签到抽奖 */
        .checkin-draw {
            background: linear-gradient(135deg, #FDF2F8, #EEF2FF);
            border-radius: var(--radius);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .checkin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .checkin-title {
            font-weight: 600;
            font-size: 1.25rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .checkin-streak {
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--primary);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .checkin-calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
            margin-bottom: 1.5rem;
        }
        
        .calendar-day {
            aspect-ratio: 1/1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            font-weight: 500;
            background-color: white;
            position: relative;
        }
        
        .calendar-day.checkined {
            background-color: var(--primary);
            color: white;
        }
        
        .calendar-day.today {
            border: 2px solid var(--primary);
            color: var(--primary);
        }
        
        .calendar-day.future {
            opacity: 0.5;
        }
        
        .calendar-day .reward {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--accent);
        }
        
        .checkin-btn {
            width: 100%;
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.75rem;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.2s ease;
        }
        
        .checkin-btn:hover {
            background-color: #5B5FEF;
        }
        
        .checkin-btn.checked {
            background-color: var(--success);
        }
        
        /* 积分抽奖 */
        .points-draw {
            padding: 1.5rem;
        }
        
        .points-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--light-gray);
            padding: 1rem;
            border-radius: var(--radius);
            margin-bottom: 1.5rem;
        }
        
        .points-balance {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .points-icon {
            color: var(--accent);
            font-size: 1.5rem;
        }
        
        .points-value {
            font-weight: 700;
            font-size: 1.25rem;
        }
        
        .points-action {
            color: var(--primary);
            font-weight: 500;
            font-size: 0.9rem;
            text-decoration: none;
        }
        
        .prize-tiers {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .prize-tier {
            background-color: white;
            border-radius: var(--radius);
            padding: 1rem;
            text-align: center;
            border: 1px solid var(--border);
            transition: all 0.2s ease;
        }
        
        .prize-tier:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
            border-color: var(--primary);
        }
        
        .tier-cost {
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.25rem 0;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
        }
        
        .tier-prizes {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 0.75rem;
        }
        
        .tier-chance {
            font-size: 0.8rem;
            color: var(--success);
            font-weight: 500;
        }
        
        /* 中奖记录 */
        .winners-section {
            margin-top: 2rem;
        }
        
        .winners-title {
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .winners-list {
            max-height: 200px;
            overflow-y: auto;
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
        }
        
        .winner-item {
            padding: 0.75rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }
        
        .winner-item:last-child {
            border-bottom: none;
        }
        
        .winner-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .winner-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-weight: 600;
        }
        
        .winner-name {
            font-weight: 500;
        }
        
        .winner-prize {
            color: var(--accent);
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .winner-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        /* 弹窗样式 */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .modal-backdrop.active {
            opacity: 1;
            visibility: visible;
        }
        
        .modal-content {
            background-color: white;
            border-radius: var(--radius);
            width: 90%;
            max-width: 400px;
            padding: 2rem 1.5rem;
            text-align: center;
            transform: translateY(-20px) scale(0.95);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .modal-backdrop.active .modal-content {
            transform: translateY(0) scale(1);
        }
        
        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.25rem;
            color: var(--gray);
            cursor: pointer;
        }
        
        .modal-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
        }
        
        .modal-icon.win {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .modal-icon.lose {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .modal-prize {
            font-size: 1.1rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 1.5rem;
            padding: 0.75rem;
            background-color: var(--light-gray);
            border-radius: 8px;
        }
        
        .modal-message {
            color: var(--gray);
            margin-bottom: 1.5rem;
        }
        
        .modal-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .modal-btn:hover {
            background-color: #5B5FEF;
        }
        
        /* 动画效果 */
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes flash {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
        
        .spinning {
            animation: spin 0.5s linear infinite;
        }
        
        .flashing {
            animation: flash 1s ease infinite;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">社交网站幸运抽奖活动</h1>
            <p class="page-subtitle">多种互动抽奖形式，提升用户活跃度和参与度</p>
        </div>
        
        <!-- 1. 幸运大转盘 -->
        <div class="draw-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-gift"></i> 幸运大转盘</h2>
                <p class="section-description">经典转盘抽奖形式，每日有3次免费抽奖机会</p>
            </div>
            
            <div class="wheel-container">
                <div class="wheel-wrapper">
                    <div class="wheel" id="luckyWheel">
                        <!-- 转盘分区会通过JS动态生成 -->
                    </div>
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cpath fill='%23F59E0B' d='M15 0 L30 20 L15 30 L0 20 Z'/%3E%3C/svg%3E" alt="转盘指针" class="wheel-pointer">
                </div>
                
                <button class="draw-btn" id="wheelDrawBtn">开始抽奖</button>
                <p class="draw-info">今日剩余抽奖次数: <span class="draw-count" id="wheelDrawCount">3</span></p>
            </div>
            
            <!-- 中奖记录 -->
            <div class="winners-section">
                <h3 class="winners-title"><i class="fas fa-history"></i> 最近中奖记录</h3>
                <div class="winners-list" id="wheelWinnersList">
                    <!-- 中奖记录会通过JS动态生成 -->
                </div>
            </div>
        </div>
        
        <!-- 2. 九宫格抽奖 -->
        <div class="draw-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-th"></i> 九宫格抽奖</h2>
                <p class="section-description">互动性强的格子翻牌抽奖，完成任务可获得额外抽奖机会</p>
            </div>
            
            <div class="grid-container">
                <div class="prize-grid" id="prizeGrid">
                    <!-- 九宫格会通过JS动态生成 -->
                </div>
                
                <button class="draw-btn grid-btn" id="gridDrawBtn">开始抽奖</button>
                <p class="draw-info text-center">今日剩余抽奖次数: <span class="draw-count" id="gridDrawCount">2</span> | <a href="#" class="text-primary">完成任务获取更多次数</a></p>
            </div>
            
            <!-- 中奖记录 -->
            <div class="winners-section">
                <h3 class="winners-title"><i class="fas fa-history"></i> 最近中奖记录</h3>
                <div class="winners-list" id="gridWinnersList">
                    <!-- 中奖记录会通过JS动态生成 -->
                </div>
            </div>
        </div>
        
        <!-- 3. 签到抽奖 -->
        <div class="draw-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-calendar-check"></i> 签到抽奖</h2>
                <p class="section-description">连续签到可获得抽奖机会，累计签到天数越多奖品越丰厚</p>
            </div>
            
            <div class="checkin-draw">
                <div class="checkin-header">
                    <div class="checkin-title">
                        <i class="fas fa-calendar-day"></i> 每日签到
                    </div>
                    <div class="checkin-streak">
                        <i class="fas fa-fire"></i> 连续签到 5 天
                    </div>
                </div>
                
                <div class="checkin-calendar" id="checkinCalendar">
                    <!-- 日历会通过JS动态生成 -->
                </div>
                
                <button class="checkin-btn" id="checkinBtn">今日签到 +1</button>
                <p class="text-center text-sm text-gray mt-2">签到可获得1次抽奖机会，连续签到7天额外获得3次抽奖机会</p>
            </div>
            
            <div class="wheel-container">
                <div class="wheel-wrapper" style="width: 280px; height: 280px;">
                    <div class="wheel" id="checkinWheel">
                        <!-- 转盘分区会通过JS动态生成 -->
                    </div>
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cpath fill='%236366F1' d='M15 0 L30 20 L15 30 L0 20 Z'/%3E%3C/svg%3E" alt="转盘指针" class="wheel-pointer">
                </div>
                
                <button class="draw-btn" id="checkinDrawBtn">使用签到机会抽奖</button>
                <p class="draw-info">当前拥有抽奖次数: <span class="draw-count" id="checkinDrawCount">3</span></p>
            </div>
        </div>
        
        <!-- 4. 积分抽奖 -->
        <div class="draw-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-ticket-alt"></i> 积分抽奖</h2>
                <p class="section-description">消耗积分参与的抽奖活动，不同等级奖池对应不同奖品和中奖概率</p>
            </div>
            
            <div class="points-draw">
                <div class="points-info">
                    <div class="points-balance">
                        <div class="points-icon">
                            <i class="fas fa-coins"></i>
                        </div>
                        <div>
                            <div>我的积分</div>
                            <div class="points-value">12,580</div>
                        </div>
                    </div>
                    <a href="#" class="points-action">
                        <i class="fas fa-plus-circle"></i> 赚取更多积分
                    </a>
                </div>
                
                <div class="prize-tiers">
                    <div class="prize-tier">
                        <div class="tier-cost">50积分/次</div>
                        <div class="prize-icon">
                            <i class="fas fa-gift"></i>
                        </div>
                        <div class="tier-prizes">普通奖品</div>
                        <div class="tier-chance">中奖率: 80%</div>
                        <button class="draw-btn mt-3" style="padding: 0.5rem 1rem; font-size: 0.9rem;">立即抽奖</button>
                    </div>
                    
                    <div class="prize-tier">
                        <div class="tier-cost">200积分/次</div>
                        <div class="prize-icon">
                            <i class="fas fa-box"></i>
                        </div>
                        <div class="tier-prizes">高级奖品</div>
                        <div class="tier-chance">中奖率: 50%</div>
                        <button class="draw-btn mt-3" style="padding: 0.5rem 1rem; font-size: 0.9rem;">立即抽奖</button>
                    </div>
                    
                    <div class="prize-tier">
                        <div class="tier-cost">500积分/次</div>
                        <div class="prize-icon">
                            <i class="fas fa-box-open"></i>
                        </div>
                        <div class="tier-prizes">豪华奖品</div>
                        <div class="tier-chance">中奖率: 30%</div>
                        <button class="draw-btn mt-3" style="padding: 0.5rem 1rem; font-size: 0.9rem;">立即抽奖</button>
                    </div>
                    
                    <div class="prize-tier">
                        <div class="tier-cost">1000积分/次</div>
                        <div class="prize-icon">
                            <i class="fas fa-award"></i>
                        </div>
                        <div class="tier-prizes">终极奖品</div>
                        <div class="tier-chance">中奖率: 10%</div>
                        <button class="draw-btn mt-3" style="padding: 0.5rem 1rem; font-size: 0.9rem;">立即抽奖</button>
                    </div>
                </div>
                
                <!-- 奖品说明 -->
                <div class="mt-4 p-3 bg-light-gray rounded-radius">
                    <h4 class="font-weight-600 mb-2">奖品说明</h4>
                    <ul class="text-sm text-gray">
                        <li><span class="font-weight-500">普通奖品：</span>积分、虚拟道具、优惠券</li>
                        <li><span class="font-weight-500">高级奖品：</span>会员天数、实物小礼品、大额优惠券</li>
                        <li><span class="font-weight-500">豪华奖品：</span>品牌周边、数码配件、会员季卡</li>
                        <li><span class="font-weight-500">终极奖品：</span>智能手机、平板电脑、旅游基金</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 抽奖结果弹窗 -->
    <div class="modal-backdrop" id="resultModal">
        <div class="modal-content">
            <button class="modal-close" id="modalClose">&times;</button>
            <div class="modal-icon win" id="modalIcon">
                <i class="fas fa-trophy"></i>
            </div>
            <h3 class="modal-title" id="modalTitle">恭喜您中奖了！</h3>
            <div class="modal-prize" id="modalPrize">100积分</div>
            <p class="modal-message" id="modalMessage">奖品已发放至您的账户，请注意查收。</p>
            <button class="modal-btn" id="modalBtn">确定</button>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 奖品配置
            const wheelPrizes = [
                "10积分", "谢谢参与", "50积分", "20积分", 
                "100积分", "谢谢参与", "30积分", "会员1天"
            ];
            
            const gridPrizes = [
                "20积分", "50积分", "谢谢参与",
                "会员3天", "开始", "100积分",
                "谢谢参与", "30积分", "80积分"
            ];
            
            const checkinPrizes = [
                "5积分", "10积分", "15积分", "20积分",
                "25积分", "30积分", "会员1天"
            ];
            
            // 幸运用户数据
            const luckyUsers = [
                {name: "张先生", prize: "100积分", time: "1分钟前"},
                {name: "李女士", prize: "会员3天", time: "5分钟前"},
                {name: "王先生", prize: "50积分", time: "12分钟前"},
                {name: "赵女士", prize: "20积分", time: "25分钟前"},
                {name: "陈先生", prize: "会员1天", time: "38分钟前"},
                {name: "刘女士", prize: "30积分", time: "1小时前"},
                {name: "杨先生", prize: "50积分", time: "2小时前"},
                {name: "黄女士", prize: "10积分", time: "3小时前"}
            ];
            
            // 生成幸运大转盘
            const luckyWheel = document.getElementById('luckyWheel');
            const wheelColors = [
                "#6366F1", "#818CF8", "#6366F1", "#818CF8",
                "#6366F1", "#818CF8", "#6366F1", "#818CF8"
            ];
            
            wheelPrizes.forEach((prize, index) => {
                const angle = 360 / wheelPrizes.length;
                const section = document.createElement('div');
                section.className = 'wheel-section';
                section.style.transform = `rotate(${index * angle}deg)`;
                section.style.backgroundColor = wheelColors[index];
                
                const text = document.createElement('div');
                text.className = 'wheel-text';
                text.textContent = prize;
                text.style.transform = `rotate(${-(index * angle + angle/2)}deg) translateY(-60px)`;
                
                section.appendChild(text);
                luckyWheel.appendChild(section);
            });
            
            // 生成九宫格抽奖
            const prizeGrid = document.getElementById('prizeGrid');
            gridPrizes.forEach((prize, index) => {
                const item = document.createElement('div');
                item.className = 'prize-item';
                if (index === 4) { // 中间的"开始"按钮
                    item.classList.add('active');
                    item.innerHTML = `
                        <div class="prize-icon"><i class="fas fa-play"></i></div>
                        <div class="prize-name">${prize}</div>
                    `;
                } else {
                    item.innerHTML = `
                        <div class="prize-icon"><i class="fas fa-gift"></i></div>
                        <div class="prize-name">${prize}</div>
                    `;
                }
                item.dataset.index = index;
                prizeGrid.appendChild(item);
            });
            
            // 生成签到日历
            const checkinCalendar = document.getElementById('checkinCalendar');
            const daysInMonth = 30; // 示例：30天
            const today = 15; // 示例：今天是15号
            const checkedDays = [10, 11, 12, 13, 14]; // 已签到的日期
            
            for (let i = 1; i <= daysInMonth; i++) {
                const day = document.createElement('div');
                day.className = 'calendar-day';
                if (i === today) {
                    day.classList.add('today');
                } else if (i > today) {
                    day.classList.add('future');
                }
                
                if (checkedDays.includes(i)) {
                    day.classList.add('checkined');
                }
                
                day.textContent = i;
                
                // 随机添加一些奖励标记
                if (Math.random() > 0.7 && i <= today) {
                    const reward = document.createElement('div');
                    reward.className = 'reward';
                    day.appendChild(reward);
                }
                
                checkinCalendar.appendChild(day);
            }
            
            // 生成签到转盘
            const checkinWheel = document.getElementById('checkinWheel');
            const checkinColors = [
                "#6366F1", "#818CF8", "#6366F1", "#818CF8",
                "#6366F1", "#818CF8", "#6366F1"
            ];
            
            checkinPrizes.forEach((prize, index) => {
                const angle = 360 / checkinPrizes.length;
                const section = document.createElement('div');
                section.className = 'wheel-section';
                section.style.transform = `rotate(${index * angle}deg)`;
                section.style.backgroundColor = checkinColors[index];
                
                const text = document.createElement('div');
                text.className = 'wheel-text';
                text.textContent = prize;
                text.style.transform = `rotate(${-(index * angle + angle/2)}deg) translateY(-50px)`;
                
                section.appendChild(text);
                checkinWheel.appendChild(section);
            });
            
            // 生成中奖记录
            function renderWinners(listElement, users) {
                listElement.innerHTML = '';
                users.forEach(user => {
                    const item = document.createElement('div');
                    item.className = 'winner-item';
                    item.innerHTML = `
                        <div class="winner-info">
                            <div class="winner-avatar">${user.name.charAt(0)}</div>
                            <div>
                                <div class="winner-name">${user.name}</div>
                                <div class="winner-time">${user.time}</div>
                            </div>
                        </div>
                        <div class="winner-prize">${user.prize}</div>
                    `;
                    listElement.appendChild(item);
                });
            }
            
            renderWinners(document.getElementById('wheelWinnersList'), luckyUsers);
            renderWinners(document.getElementById('gridWinnersList'), luckyUsers.slice(0, 5));
            
            // 抽奖逻辑
            const resultModal = document.getElementById('resultModal');
            const modalIcon = document.getElementById('modalIcon');
            const modalTitle = document.getElementById('modalTitle');
            const modalPrize = document.getElementById('modalPrize');
            const modalMessage = document.getElementById('modalMessage');
            const modalClose = document.getElementById('modalClose');
            const modalBtn = document.getElementById('modalBtn');
            
            // 关闭弹窗
            function closeModal() {
                resultModal.classList.remove('active');
            }
            
            modalClose.addEventListener('click', closeModal);
            modalBtn.addEventListener('click', closeModal);
            
            // 显示抽奖结果
            function showResult(isWin, prize) {
                if (isWin) {
                    modalIcon.className = 'modal-icon win';
                    modalIcon.innerHTML = '<i class="fas fa-trophy"></i>';
                    modalTitle.textContent = '恭喜您中奖了！';
                    modalPrize.textContent = prize;
                    modalMessage.textContent = '奖品已发放至您的账户，请注意查收。';
                } else {
                    modalIcon.className = 'modal-icon lose';
                    modalIcon.innerHTML = '<i class="fas fa-meh"></i>';
                    modalTitle.textContent = '很遗憾未中奖';
                    modalPrize.style.display = 'none';
                    modalMessage.textContent = '再接再厉，下次一定能中！';
                }
                
                resultModal.classList.add('active');
            }
            
            // 幸运大转盘抽奖
            const wheelDrawBtn = document.getElementById('wheelDrawBtn');
            const wheelDrawCount = document.getElementById('wheelDrawCount');
            let wheelSpinning = false;
            
            wheelDrawBtn.addEventListener('click', function() {
                if (wheelSpinning || parseInt(wheelDrawCount.textContent) <= 0) return;
                
                wheelSpinning = true;
                wheelDrawBtn.disabled = true;
                wheelDrawBtn.textContent = '抽奖中...';
                
                // 随机旋转角度 (3-5圈 + 随机位置)
                const spinAngle = 360 * (3 + Math.random() * 2) + (Math.random() * 360);
                luckyWheel.style.transform = `rotate(${spinAngle}deg)`;
                
                // 计算中奖结果
                setTimeout(() => {
                    const normalizedAngle = spinAngle % 360;
                    const sectionAngle = 360 / wheelPrizes.length;
                    const winningSection = Math.floor((360 - normalizedAngle) / sectionAngle) % wheelPrizes.length;
                    const prize = wheelPrizes[winningSection];
                    
                    wheelSpinning = false;
                    wheelDrawBtn.disabled = false;
                    wheelDrawBtn.textContent = '开始抽奖';
                    wheelDrawCount.textContent = parseInt(wheelDrawCount.textContent) - 1;
                    
                    showResult(prize !== '谢谢参与', prize);
                }, 5000); // 与CSS动画时间一致
            });
            
            // 九宫格抽奖
            const gridDrawBtn = document.getElementById('gridDrawBtn');
            const gridDrawCount = document.getElementById('gridDrawCount');
            const prizeItems = document.querySelectorAll('.prize-item');
            let gridSpinning = false;
            
            gridDrawBtn.addEventListener('click', function() {
                if (gridSpinning || parseInt(gridDrawCount.textContent) <= 0) return;
                
                gridSpinning = true;
                gridDrawBtn.disabled = true;
                gridDrawBtn.textContent = '抽奖中...';
                
                // 重置所有格子状态
                prizeItems.forEach(item => item.classList.remove('active', 'winning'));
                
                // 随机选中一个格子作为中奖结果
                const winIndex = Math.floor(Math.random() * (gridPrizes.length - 1));
                const finalWinIndex = winIndex >= 4 ? winIndex + 1 : winIndex; // 避开中间的"开始"按钮
                
                // 模拟滚动效果
                let currentIndex = 0;
                let speed = 100;
                let steps = 0;
                const totalSteps = 30; // 滚动总步数
                
                const spinInterval = setInterval(() => {
                    // 移除上一个格子的active状态
                    prizeItems.forEach(item => item.classList.remove('active'));
                    
                    // 设置当前格子的active状态
                    prizeItems[currentIndex].classList.add('active');
                    
                    // 逐渐减速
                    steps++;
                    if (steps > totalSteps * 0.7) {
                        speed = 200;
                    }
                    if (steps > totalSteps * 0.9) {
                        speed = 400;
                    }
                    
                    // 最后几步直接走向中奖格子
                    if (steps >= totalSteps) {
                        clearInterval(spinInterval);
                        prizeItems.forEach(item => item.classList.remove('active'));
                        prizeItems[finalWinIndex].classList.add('active', 'winning');
                        
                        gridSpinning = false;
                        gridDrawBtn.disabled = false;
                        gridDrawBtn.textContent = '开始抽奖';
                        gridDrawCount.textContent = parseInt(gridDrawCount.textContent) - 1;
                        
                        const prize = gridPrizes[finalWinIndex];
                        showResult(prize !== '谢谢参与', prize);
                        return;
                    }
                    
                    // 计算下一个格子索引 (顺时针方向)
                    currentIndex++;
                    if (currentIndex >= prizeItems.length) {
                        currentIndex = 0;
                    }
                }, speed);
            });
            
            // 签到功能
            const checkinBtn = document.getElementById('checkinBtn');
            let checkedIn = false;
            
            checkinBtn.addEventListener('click', function() {
                if (checkedIn) return;
                
                checkedIn = true;
                checkinBtn.textContent = '已签到 +1';
                checkinBtn.classList.add('checked');
                
                // 更新日历上今天的状态
                const calendarDays = document.querySelectorAll('.calendar-day');
                calendarDays.forEach(day => {
                    if (day.classList.contains('today')) {
                        day.classList.add('checkined');
                    }
                });
                
                // 增加抽奖次数
                const checkinDrawCount = document.getElementById('checkinDrawCount');
                checkinDrawCount.textContent = parseInt(checkinDrawCount.textContent) + 1;
                
                // 显示提示
                alert('签到成功！获得1次抽奖机会');
            });
            
            // 签到转盘抽奖
            const checkinDrawBtn = document.getElementById('checkinDrawBtn');
            const checkinDrawCount = document.getElementById('checkinDrawCount');
            let checkinSpinning = false;
            
            checkinDrawBtn.addEventListener('click', function() {
                if (checkinSpinning || parseInt(checkinDrawCount.textContent) <= 0) return;
                
                checkinSpinning = true;
                checkinDrawBtn.disabled = true;
                checkinDrawBtn.textContent = '抽奖中...';
                
                // 随机旋转角度
                const spinAngle = 360 * (3 + Math.random() * 2) + (Math.random() * 360);
                checkinWheel.style.transform = `rotate(${spinAngle}deg)`;
                
                // 计算中奖结果
                setTimeout(() => {
                    const normalizedAngle = spinAngle % 360;
                    const sectionAngle = 360 / checkinPrizes.length;
                    const winningSection = Math.floor((360 - normalizedAngle) / sectionAngle) % checkinPrizes.length;
                    const prize = checkinPrizes[winningSection];
                    
                    checkinSpinning = false;
                    checkinDrawBtn.disabled = false;
                    checkinDrawBtn.textContent = '使用签到机会抽奖';
                    checkinDrawCount.textContent = parseInt(checkinDrawCount.textContent) - 1;
                    
                    // 签到抽奖不会有"谢谢参与"
                    showResult(true, prize);
                }, 5000);
            });
            
            // 积分抽奖按钮
            const pointsDrawBtns = document.querySelectorAll('.prize-tier .draw-btn');
            pointsDrawBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const cost = this.parentElement.querySelector('.tier-cost').textContent;
                    const tier = this.parentElement.querySelector('.tier-prizes').textContent;
                    
                    // 随机生成奖品
                    const prizes = {
                        '普通奖品': ['5积分', '10积分', '20积分', '50积分', '虚拟道具', '5元优惠券'],
                        '高级奖品': ['100积分', '会员1天', '会员3天', '20元优惠券', '小礼品'],
                        '豪华奖品': ['200积分', '会员7天', '品牌周边', '50元优惠券', '数码配件'],
                        '终极奖品': ['500积分', '会员30天', '智能手表', '平板电脑', '旅游基金']
                    };
                    
                    const possiblePrizes = prizes[tier];
                    const prize = possiblePrizes[Math.floor(Math.random() * possiblePrizes.length)];
                    
                    // 显示结果
                    showResult(true, prize);
                });
            });
        });
    </script>
</body>
</html>
    
